<template>
  <div class="layout">
    <top-bar></top-bar>
    <div id="main-content">
      <div  id="menu-box">
        <Aside></Aside>
      </div>
      <div id="main-banner">
        <router-view id="router-view-box"></router-view>
      </div>
    </div> 
  </div>

</template>

<script>
import TopBar from './TopBar'
import Aside from './Aside'
export default {
  components: {
    TopBar,
    Aside

  }
}
</script>

<style lang='scss'>
.layout {
  min-width: 1024px;

  #main-content {
    height: calc(100vh - 60px);
    display: flex;
    #menu-box {
      width: 240px;
      height: 100%;
      box-sizing: border-box;
      border-right: 1px solid #ebebeb;
      background-color: #fff;
      padding-bottom: 10px;
    }
    #main-banner {
      width: calc( 100% - 240px);
      background-color: #f5f5f5;
      padding: 15px;
      overflow-y: auto;
      box-sizing: border-box;
      height: 100%;
      #router-view-box {
        width: 100%;
        min-height: 100%;
        box-sizing: border-box;
        border-radius: 5px;
        box-shadow: -1px -1px 5px 0 rgb(0 0 0 / 10%);
        background-color: #fff;
        padding: 15px;
      }
    }
  }
}
</style>